<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML5 Chart jQuery Plugin - Multiple Axes </title>
    <link rel="stylesheet" type="text/css" href="../css/jquery.jqChart.css" />
    <link rel="stylesheet" type="text/css" href="../css/jquery.jqRangeSlider.css" />
    <link rel="stylesheet" type="text/css" href="../themes/smoothness/jquery-ui-1.8.21.css" />
    <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="../js/jquery.jqChart.min.js" type="text/javascript"></script>
    <script src="../js/jquery.jqRangeSlider.min.js" type="text/javascript"></script>
    <!--[if IE]><script lang="javascript" type="text/javascript" src="../js/excanvas.js"></script><![endif]-->
    <script lang="javascript" type="text/javascript">
        $(document).ready(function () {
            $('#jqChart').jqChart({
                title: { text: 'Multiple Axes' },
                axes: [
                         {
                             name: 'y1',
                             location: 'left'
                         },
                         {
                             name: 'y2',
                             location: 'right',
                             strokeStyle: '#FCB441',
                             majorGridLines: { strokeStyle: '#FCB441' },
                             majorTickMarks: { strokeStyle: '#FCB441' }
                         }
                      ],
                series: [
                            {
                                type: 'column',
                                axisY: 'y1',
                                data: [['a', 1], ['b', 4], ['c', 3], ['d', 5], ['e', 2], ['f', 1]]
                            },
                            {
                                type: 'line',
                                axisY: 'y2',
                                data: [['a', 40], ['b', 60], ['c', 62], ['d', 52], ['e', 70], ['f', 75]]
                            }
                        ]
            });
        });
    </script>
</head>
<body>
    <div>
        <div id="jqChart" style="width: 500px; height: 300px;">
        </div>
    </div>
</body>
</html>
